<ng-template #progressInfoTemplate>
  <span class="ant-progress-text" *ngIf="nzShowInfo">
    <ng-container *ngIf="status === 'exception' || (status === 'success' && !nzFormat); else formatTemplate">
      <i nz-icon [nzType]="icon"></i>
    </ng-container>
    <ng-template #formatTemplate>
      {{ formatter(nzPercent) }}
    </ng-template>
  </span>
</ng-template>
<div
  [ngClass]="'ant-progress ant-progress-status-' + status"
  [class.ant-progress-line]="nzType == 'line'"
  [class.ant-progress-small]="nzSize == 'small'"
  [class.ant-progress-show-info]="nzShowInfo"
  [class.ant-progress-circle]="isCircleStyle"
>
  <!-- Line progress -->
  <div *ngIf="nzType === 'line'">
    <div class="ant-progress-outer">
      <div class="ant-progress-inner">
        <div
          class="ant-progress-bg"
          [style.width.%]="nzPercent"
          [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
          [style.background]="nzStrokeColor"
          [style.height.px]="strokeWidth"
        ></div>
        <div
          class="ant-progress-success-bg"
          [style.width.%]="nzSuccessPercent"
          [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
          [style.height.px]="strokeWidth"
        ></div>
      </div>
    </div>
    <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
  </div>
  <!-- Circle/Dashboard progress -->
  <div
    [style.width.px]="this.nzWidth"
    [style.height.px]="this.nzWidth"
    [style.fontSize.px]="this.nzWidth * 0.15 + 6"
    class="ant-progress-inner"
    *ngIf="isCircleStyle"
  >
    <svg class="ant-progress-circle" viewBox="0 0 100 100">
      <path
        class="ant-progress-circle-trail"
        stroke="#f3f3f3"
        fill-opacity="0"
        [attr.stroke-width]="strokeWidth"
        [ngStyle]="trailPathStyle"
        [attr.d]="pathString"
      ></path>
      <path
        class="ant-progress-circle-path"
        [attr.d]="pathString"
        [attr.stroke-linecap]="nzStrokeLinecap"
        fill-opacity="0"
        [attr.stroke]="nzStrokeColor || statusColorMap[status]"
        [attr.stroke-width]="nzPercent ? strokeWidth : 0"
        [ngStyle]="strokePathStyle"
      ></path>
    </svg>
    <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
  </div>
</div>
